<!-- PracticeCard.vue -->
<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';

interface PracticeCardProps {
  customPrimary: string;
  practiceName: string;
  practiceIntroduction: string;
  practiceImage: string;
  practiceUrl: string;
}

export default defineComponent({
  name: 'PracticeCard',
  props: {
    practice: {
      type: Object as PropType<PracticeCardProps>,
      required: true,
    },
  },
  setup(props) {
    const router = useRouter();

    const handleInfo = () => {
      // 您可以根据需要存储或处理实践项目的数据
      // 这里假设直接跳转到实践项目的URL
      window.open(props.practice.practiceUrl, '_blank');
    };

    return {
      handleInfo,
    };
  },
});
</script>

<template>
  <div
    class="practice-card"
    style="width: 380px; height: 400px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; box-sizing: border-box; border-radius: 20px; background-color: #fff"
  >
    <div>
      <div class="img">
        <img :src="practice.practiceImage" alt="" style="width: 327px; height: 168px">
      </div>
      <div class="content">
        <p style="font-weight: bold; font-size: 20px; margin-top: 20px; color: black">
          {{ practice.practiceName }}
        </p>
        <p
          style="font-size: 16px; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis"
        >
          {{ practice.practiceIntroduction }}
        </p>
      </div>
    </div>
    <div style="display: flex; justify-content: flex-start; align-items: center; margin-top: auto">
      <button
        class="start-practice-button"
        @click="handleInfo"
      >
        立即参加
      </button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.practice-card {
  display: inline-block;
  padding: 20px;
  border-radius: 20px;
  background-color: #fff;

  .img {
    width: 100%;
    height: 168px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  }

  .content {
    margin-top: 20px;

    p {
      line-height: 1.5;
    }

    p:nth-child(1) {
      font-size: 20px;
      font-weight: bold;
      color: #000;
    }

    p:nth-child(2) {
      color: #4f4f4f;
      font-size: 16px;
    }
  }

  .start-practice-button {
    background-color: #e6f0ff;
    color: #2669f3;
    border: none;
    font-size: 1.125rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.25rem;
    cursor: pointer;

    &:hover {
      background-color: #3867ea;
      color: #fff;
    }
  }
}
</style>
